<template>
  <div
    class="defalut-img relative"
    :style="{ width, height, backgroundSize: `${width} ${height}`, marginTop: margintop }"
  >
    <div
      class="absolute bottom-[36px] left-1/2 h-[30px] -translate-x-1/2 text-center text-[14px] leading-[30px] text-[#65728CFF]"
      :style="{ bottom }"
    >
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  name: "TEmptyData",
  props: {
    message: {
      type: String,
      default: "暂无数据",
    },
    len: {
      type: [String, Number],
      require: false,
    },
    margintop: {
      type: String,
      default: "10px",
    },
    width: {
      type: String,
      default: "257px",
    },
    height: {
      type: String,
      default: "225px",
    },
    bottom: {
      type: String,
      default: "0px",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.defalut-img {
  left: 50%;
  background: url("@/assets/images/icon_empty_data.png") no-repeat 0 0;
  transform: translateX(-50%);
}
</style>
